<template>
  <div class="navM">
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1">
        <router-link to="./index">首页</router-link>
      </el-menu-item>
      <el-menu-item index="2">
        <router-link to="./guide">比赛指南</router-link>
      </el-menu-item>
      <el-menu-item index="3">
        <router-link to="./notice">赛事公告</router-link>
      </el-menu-item>
      <el-menu-item index="4">
        <router-link to="./news">赛事新闻</router-link>
      </el-menu-item>
      <el-menu-item index="5">
        <router-link to="./production">作品展示</router-link>
      </el-menu-item>
      <el-menu-item index="6">
        <router-link to="./collage">微课学院</router-link>
      </el-menu-item>
      <el-menu-item index="7" v-if="isLongShow == 1">
        <router-link to="./myself">个人中心</router-link>
      </el-menu-item>
      <div class="demo-basic--circle">
        <div class="block" v-if="isLong == 0" @click="loginDialog">
          <span>登陆</span>
        </div>
        <div class="block" v-if="isLong == 1" @click="showOut">
          <img
            v-if="isImg"
            :size="40"
            :src="user.user_pic"
            style="width: 40px;height: 40px;position: absolute;right: 50px;top: 8px;border-radius: 20px;"
          />
          <span v-if="!isImg">{{userName}} 退出</span>
        </div>
      </div>
    </el-menu>
    <!--登录弹框-->
    <login @closeLogin="closeLogin" :loginShow="loginShow"></login>

    <el-dialog
      :visible.sync="centerDialogVisible"
      :before-close="closeOut"
      width="30%"
      center
      :closeOnClickModal="false"
    >
      <span>尊敬的用户，您确定退出吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="noOut">取 消</el-button>
        <el-button type="primary" @click="loginOut">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import login from "../../share/popout/login";
export default {
  name: "navMenu",
  components: {
    login
  },
  data() {
    return {
      centerDialogVisible: false,
      activeIndex: "1",
      loginShow: 0, //父子组件传值
      isLong: "",
      userName: null,
      user: {
        user_pic: null
      },
      isImg: null,
      isLongShow: null //展示个人中心
    };
  },

  mounted() {
    let a = sessionStorage.getItem("user");
    let c = sessionStorage.getItem("activeIndex");
    this.activeIndex = JSON.parse(c);
    // debugger
    if (a != "undefined") {
      let isLogin = JSON.parse(a);
      this.user = isLogin;
      console.log(isLogin)
      if (isLogin == null) {
        this.isLong = 0;
      } else {
        this.isLong = 1;
        this.isImg = true;
        this.isLongShow = 1;
      }
    } else {
      this.isLong = 1;
      this.isImg = false;
      this.userName = "正在审核中";
      this.isLongShow = 0;
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      sessionStorage.setItem("activeIndex", JSON.stringify(key));
      // //console.log(key);
    },
    /*登陆*/
    loginDialog() {
      //子传父
      this.loginShow = 1;
    },
    closeLogin(msg) {
      //console.log(msg);
      this.loginShow = msg[0];
      this.isLong = msg[1];
    },
    closeOut() {
      this.isLong = 1;
      this.centerDialogVisible = false;
    },
    showOut() {
      //退出展示
      this.centerDialogVisible = true;
    },
    loginOut() {
      //退出
      this.centerDialogVisible = false;
      this.isLong = 0;
      this.loginShow = 0;
      sessionStorage.removeItem("user");
      sessionStorage.removeItem("userName");
      this.$router.push({ path: "./index" });
      location.reload()
    },
    noOut() {
      //不退出
      this.centerDialogVisible = false;
    }
  }
};
</script>

<style scoped lang="less">
.navM {
  width: 100%;
  height: 100%;
  background: rgb(84, 92, 100);
}
.el-menu--horizontal {
  width: 1200px;
  margin: 0 auto;
}
.el-menu.el-menu--horizontal {
  border: none;
}
.demo-basic--circle {
  float: right;

  .block {
    line-height: 61px;
    color: #fff;

    span {
      padding: 0 10px;
      font-size: 14px;
      cursor: pointer;
    }
  }
}
.el-menu-item {
  a {
    text-decoration: none;
  }
}
</style>
